<template>
  <view class="">
    <cu-custom bgColor="bg-gradual-green" :isBack="true">
      <block slot="backText">返回</block>
      <block slot="content">创建训练方案</block>
    </cu-custom>
    <!-- 身体数据 -->
    <view style="background-color: #fff;padding: 30upx;">
      <view style="display: flex;justify-content: space-between;line-height: 100upx;">
        <view style="display: flex;">
          <view style="width: 10upx;height: 50upx;background-color: #378CE9;margin-top: 25upx;margin-right: 20upx;">
          </view>
          <view>
            身体数据
          </view>
        </view>
        <!-- <view style="display: flex;" @click="jump" :data-src='"/pagesA/Training_program/reference_data?id="+item.userId'>
					<view style="font-size: 24upx;margin-right: 30upx;">
						编辑数据
					</view>
					<view>
						<image style="width: 50upx;height: 50upx;margin-top: 25upx;" src="../../static/33.png" mode=""></image>
					</view>
				</view> -->
      </view>

      <view style="background-color: #fff;display: flex; justify-content: space-around;">
        <view class="items" v-for="(item, index) in bodyData" :key="index">
          <view style="font-size: 22upx;">
            {{item.name}}
          </view>
          <view style="font-weight: bold;">
            {{item.value}}
          </view>
          <view style="padding: 10upx 15upx;color: #fff;border-radius: 10upx;" :class="item.bgColor">
            {{item.btnValue}}
          </view>
        </view>
      </view>

      <view style="font-size: 22upx;margin-top: 15upx;">
        以上数据来自{{createTime}}身体测试
      </view>
    </view>
    <!-- 健身目标&方案 -->
    <view style="background-color: #fff;padding: 30upx;margin: 20rpx 0 100rpx;">
      <view style="display: flex;justify-content: space-between;line-height: 100upx;">
        <view style="display: flex;">
          <view style="width: 10upx;height: 50upx;background-color: #378CE9;margin-top: 25upx;margin-right: 20upx;">
          </view>
          <view>
            健身目标&方案
          </view>
        </view>
      </view>
      <!-- 健身目标 按钮组 -->
      <menu-item :menus="menus9999" :menuLists="menuList9999" @menusClick="menusClick($event, 99, 99)" @qitainput="qitainput($event, 99, 99)" />

      <view style="display: flex;justify-content: space-between;">
        <view style="flex: 1;display: flex;line-height: 100upx;">
          <view>
            健身频率
          </view>
          <view>
            <input style="width: 80upx;height: 50upx;margin-top: 25upx;text-align: center;" type="number" v-model="trainingFrequency" />
          </view>
          <view style="font-size: 22upx;color: #ccc;">
            次/周
          </view>
        </view>
        <view style="flex: 1;display: flex;line-height: 100upx;">
          <view>
            健身总周期
          </view>
          <view>
            <input style="width: 80upx;height: 50upx;margin-top: 25upx;text-align: center;" type="number" v-model="trainingCycle" />
          </view>
          <view style="font-size: 22upx;color: #ccc;">
            周
          </view>
        </view>
      </view>

      <view v-for="(item,index) in coach" :key='index' style="margin-top: 40upx;">
        <view class="gird" :class="{active1: item.SYQ == true}" @click="toggle(item,index)">
          <view style="display: flex;">
            <view :style="{ backgroundColor: item.bgc,}" style="width: 30upx;height: 30upx;margin-top: 35upx;"></view>
            <view style="margin-left: 40upx;">{{item.title}}</view>
          </view>
          <view style="display: flex;">
            <image v-if="!item.SYQ" style="width: 50upx;height: 50upx;margin-top: 25upx;" src="../../static/user/right.png"
              mode=""></image>
            <image v-if="item.SYQ" style="width: 50upx;height: 50upx;margin-top: 25upx;" src="../../static/user/bottom.png"
              mode=""></image>
          </view>
        </view>

        <view v-if="item.SYQ">
          <!-- 重点 添加项目 -->
          <view v-for="(item2, index2) in item.list" :key="index2" style="padding: 20upx;background-color:#F8F8F8 ;">

            <uni-popup :id="'popupDialog'+index+index2" :ref="'popupDialog'+index+index2" type="dialog" @change="change">
              <uni-popup-dialog :type="msgType" title="通知" :menus="getMenus(index, index2)" :menuLists="getMenuList(index, index2)"
                @menusClick="menusClick($event, index, index2)" @qitainput="qitainput($event, index, index2)"
                :before-close="true" @confirm="dialogConfirm($event, index, index2)" @close="dialogClose($event, index, index2)"></uni-popup-dialog>
            </uni-popup>
            <view style="display: flex;height: 80upx;line-height: 80upx;">
              <view style="display: flex;">
                <view style="width: 10upx;height: 30upx;background-color: #388FEC;margin-top: 25upx;"></view>
                <view style="margin-left: 20upx;">{{item2.name}}</view>
              </view>
            </view>
            <view v-if="item2['menuList'+index+index2].length" class="showMenulist">
              <text style="margin-right: 10rpx;" v-for="(it, ind) in item2['menuList'+index+index2]">{{it.title+'、'}}</text>
            </view>
            <view @click="toggleMessage('success', index, index2)" style="height: 80upx;line-height: 80upx;background-color: #EDEDED; color: #999;text-align: center;">
              + {{item2.addName}}
            </view>
          </view>
          <!-- 训练目标 -->
          <view style="padding: 20upx;background-color:#F8F8F8 ;">
            <view style="display: flex;height: 80upx;line-height: 80upx;">
              <view style="display: flex;">
                <view style="width: 10upx;height: 30upx;background-color: #388FEC;margin-top: 25upx;"></view>
                <view style="margin-left: 20upx;">训练目标</view>
              </view>
            </view>
            <!-- 体重记录 -->
            <view style="background-color: #EDEDED; color: #000;">
              <view class="u-f-ajc item_ul">
                <view class="item_li u-f-ac u-f-jsb" v-for="(item3, index3) in item.target" :key="index3">
                  <view style="font-size: 20upx;">
                    {{item3.name}}
                  </view>
                  <view>
                    <input style="width: 40upx;height: 50upx;text-align: center;" type="number" v-model="item3.value" />
                  </view>
                  <text style="font-size: 20upx;color: #999;">
                    {{item3.unit}}
                  </text>
                </view>
              </view>
            </view>

            <!-- 备注 -->
            <view>
              <textarea value="" placeholder="请输入备注" style="height: 200upx;margin-top: 20upx;" v-model="item.textArea" />
              </view>
					</view>
				</view>
			</view>
			
			<!-- 添加新的阶段 -->
			<view @click="addstage" style="height: 100upx;line-height: 100upx;display: flex;background-color: #fff;border: 1upx dashed #909090;margin-top: 30upx;">
				<view style="color: #909090;margin-left: 30upx;font-size: 55upx;">
					+
				</view>
				<view style="color: #909090;margin-left: 30upx;">
					添加阶段
				</view>
			</view>
		</view>
		
			<view @click="jump" data-src='/pagesA/Training_program/Project_details' style="position: fixed;bottom: 0; width: 100%;height: 100upx;line-height: 100upx;background-color: #39BB9E;color: #fff;text-align: center;z-index: 99;">
				创建方案
			</view>
	</view>
</template>

<script>
	import menuItem from "./components/menuItem.vue"
	import uniPopup from "../../components/uni-popup/uni-popup.vue"
	import uniPopupDialog from "../../components/uni-popup/uni-popup-dialog.vue"
	export default {
		components: {
			menuItem,
			uniPopup,
			uniPopupDialog,
		},
		data() {
			return {
				bodyData: [
					{
						name: "身高(cm)",
						value: "",
						btnValue: "标准",
						bgColor: "bgcolor2",
					},
					{
						name: "体重(kg)",
						value: "",
						btnValue: "",
						bgColor: "",
					},
					{
						name: "体脂率",
						value: "",
						btnValue: "",
						bgColor: "",
					},
					{
						name: "BMI",
						value: "10",
						btnValue: "标准",
						bgColor: "bgcolor2",
					},
					{
						name: "肌肉量(kg)",
						value: "10",
						btnValue: "标准",
						bgColor: "bgcolor2",
					},
				],
				createTime: "",
				coach:[
					{
						title:'适应期',
						SYQ: false,
						bgc:'#F4B249',
						list: [
							{
								id: 0,
								name: "训练重点",
								addName: "添加重点",
								menus00:[
									{
									title:'力量0',
									show:false,
									},
									{
									title:'有氧',
									show:false,
									},
									{
									title:'柔韧性',
									show:false,
									},
									{
									title:'增肌',
									show:false,
									},
									{
									title:'综合体能',
									show:false,
									},
								],
								menuList00: [],
							},
							{
								id: 1,
								name: "训练项目",
								addName: "添加项目",
								menus01:[
									{
									title:'基础动作01',
									show:false,
									},
									{
									title:'固定器械',
									show:false,
									},
									{
									title:'小工具',
									show:false,
									},
									{
									title:'跑步机',
									show:false,
									},
									{
									title:'椭圆机',
									show:false,
									},
									{
									title:'划船机',
									show:false,
									},
									{
									title:'动态拉伸',
									show:false,
									},
									{
									title:'主动拉伸',
									show:false,
									},
									{
									title:'被动牵引',
									show:false,
									},
									{
									title:'自由重量',
									show:false,
									},
									{
									title:'自重训练',
									show:false,
									},
									{
									title:'核心训练',
									show:false,
									},
									{
									title:'循环训练',
									show:false,
									},
									{
									title:'有氧训练',
									show:false,
									},
									{
									title:'私教团课',
									show:false,
									},
									{
									title:'EMS',
									show:false,
									},
									{
									title:'PowerPlate',
									show:false,
									},
									{
									title:'MFT',
									show:false,
									},
									{
									title:'Trigger',
									show:false,
									},
								],
								menuList01: [],
							},
						],
						target: [
							{
								name: "体重记录",
								value: "50",
								unit: "kg",
							},
							{
								name: "体脂变化",
								value: "30",
								unit: "%",
							},
							{
								name: "肌肉变化",
								value: "10",
								unit: "kg",
							},
							{
								name: "每周频率",
								value: "1",
								unit: "次/周",
							},
							{
								name: "阶段周期",
								value: "1",
								unit: "周",
							},
							{
								name: "阶段次数",
								value: "1",
								unit: "次",
							},
						],
						textArea: 1,
					},
					{
						title:'进步期',
						SYQ: false,
						bgc:'#6CD1C5',
						list: [
							{
								id: 0,
								name: "训练重点",
								addName: "添加重点",
								menus10:[
									{
									title:'力量11',
									show:false,
									},
									{
									title:'有氧',
									show:false,
									},
									{
									title:'柔韧性',
									show:false,
									},
									{
									title:'增肌',
									show:false,
									},
									{
									title:'综合体能',
									show:false,
									},
								],
								menuList10: [],
							},
							{
								id: 1,
								name: "训练项目",
								addName: "添加项目",
								menus11:[
									{
									title:'基础动作11',
									show:false,
									},
									{
									title:'固定器械',
									show:false,
									},
									{
									title:'小工具',
									show:false,
									},
									{
									title:'跑步机',
									show:false,
									},
									{
									title:'椭圆机',
									show:false,
									},
									{
									title:'划船机',
									show:false,
									},
									{
									title:'动态拉伸',
									show:false,
									},
									{
									title:'主动拉伸',
									show:false,
									},
									{
									title:'被动牵引',
									show:false,
									},
									{
									title:'自由重量',
									show:false,
									},
									{
									title:'自重训练',
									show:false,
									},
									{
									title:'核心训练',
									show:false,
									},
									{
									title:'循环训练',
									show:false,
									},
									{
									title:'有氧训练',
									show:false,
									},
									{
									title:'私教团课',
									show:false,
									},
									{
									title:'EMS',
									show:false,
									},
									{
									title:'PowerPlate',
									show:false,
									},
									{
									title:'MFT',
									show:false,
									},
									{
									title:'Trigger',
									show:false,
									},],
								menuList11: [],
							},
						],
						target: [
							{
								name: "体重记录",
								value: "50",
								unit: "kg",
							},
							{
								name: "体脂变化",
								value: "30",
								unit: "%",
							},
							{
								name: "肌肉变化",
								value: "10",
								unit: "kg",
							},
							{
								name: "每周频率",
								value: "1",
								unit: "次/周",
							},
							{
								name: "阶段周期",
								value: "1",
								unit: "周",
							},
							{
								name: "阶段次数",
								value: "1",
								unit: "次",
							},
						],
						textArea: 2,
					},
					{
						title:'巩固期',
						SYQ: false,
						bgc:'#809AF1',
						list: [
							{
								id: 0,
								name: "训练重点",
								addName: "添加重点",
								menus20:[
									{
									title:'力量20',
									show:false,
									},
									{
									title:'有氧',
									show:false,
									},
									{
									title:'柔韧性',
									show:false,
									},
									{
									title:'增肌',
									show:false,
									},
									{
									title:'综合体能',
									show:false,
									},
								],
								menuList20: [],
							},
							{
								id: 1,
								name: "训练项目",
								addName: "添加项目",
								menus21:[
										{
										title:'基础动作21',
										show:false,
										},
										{
										title:'固定器械',
										show:false,
										},
										{
										title:'小工具',
										show:false,
										},
										{
										title:'跑步机',
										show:false,
										},
										{
										title:'椭圆机',
										show:false,
										},
										{
										title:'划船机',
										show:false,
										},
										{
										title:'动态拉伸',
										show:false,
										},
										{
										title:'主动拉伸',
										show:false,
										},
										{
										title:'被动牵引',
										show:false,
										},
										{
										title:'自由重量',
										show:false,
										},
										{
										title:'自重训练',
										show:false,
										},
										{
										title:'核心训练',
										show:false,
										},
										{
										title:'循环训练',
										show:false,
										},
										{
										title:'有氧训练',
										show:false,
										},
										{
										title:'私教团课',
										show:false,
										},
										{
										title:'EMS',
										show:false,
										},
										{
										title:'PowerPlate',
										show:false,
										},
										{
										title:'MFT',
										show:false,
										},
										{
										title:'Trigger',
										show:false,
										},
									],
								menuList21: [],
							},
						],
						target: [
							{
								name: "体重记录",
								value: "50",
								unit: "kg",
							},
							{
								name: "体脂变化",
								value: "30",
								unit: "%",
							},
							{
								name: "肌肉变化",
								value: "10",
								unit: "kg",
							},
							{
								name: "每周频率",
								value: "1",
								unit: "次/周",
							},
							{
								name: "阶段周期",
								value: "1",
								unit: "周",
							},
							{
								name: "阶段次数",
								value: "1",
								unit: "次",
							},
						],
						textArea: 3,
					},
				],
				menus9999:[
					{
					title:'减脂',
					show:false,
					},
					{
					title:'增肌',
					show:false,
					},
					{
					title:'增强体质',
					show:false,
					},
					{
					title:'康复',
					show:false,
					}],
				menuList9999: [],
				currentIndex:0,
				userId: uni.getStorageSync('phyUser').userId,
				msgType: 'success',
				message: '这是一条成功消息提示',
				trainingFrequency: "", // 健身频率
				trainingCycle: "", // 健身总周期
				// userId: uni.getStorageSync("userId"),
			};
		},
		onLoad() {
			this.setajax()
		},
		methods: {
			async setajax() {
				uni.showLoading({
					title: "正在加载数据..."
				})
				let {data:{datas}} = await this.$myRuquest({
					// baseUrl: "http://192.168.1.102:9091",
					url: "/coach/body/getBodyMeasurementList",
					data: {
						userId: this.userId,
						// userId: 285,
					}
				})
				uni.hideLoading();
				this.bodyData[0].value = datas[0].height;
				
				this.bodyData[1].value = datas[0].weight;
				this.bodyData[1].btnValue = this.weights(datas[0].weight);
				this.bodyData[1].bgColor = this.weightsColor(this.bodyData[1].btnValue);
				
				this.bodyData[2].value = datas[0].bfr;
				this.bodyData[2].btnValue = this.bfrs(datas[0].bfr);
				this.bodyData[2].bgColor = this.bfrsColor(this.bodyData[2].btnValue);
				
				this.createTime = datas[0].createTime;
			},
				weights(weight) {
					if (weight <= 63) return "偏低"
					else if (weight <= 77) return "标准"
					else if (weight <= 84) return "超重"
					else if (weight > 84) return "肥胖"
				},
				weightsColor(weight) {
					if (weight == '偏低') return "bgcolor1"
					if (weight == '标准') return "bgcolor2"
					if (weight == '超重') return "bgcolor3"
					if (weight == '肥胖') return "bgcolor4"
				},
				bfrs(bfr) {
					if (bfr <= 10.6) return "偏低"
					else if (bfr <= 18.7) return "标准"
					else if (bfr <= 23.4) return "偏高"
					else if (bfr > 23.4) return "超高"
				},
				bfrsColor(bfr) {
					if (bfr == '偏低') return "bgcolor1"
					if (bfr == '标准') return "bgcolor2"
					if (bfr == '偏高') return "bgcolor3"
					if (bfr == '超高') return "bgcolor4"
				},
			
			menusClick(e, index, index2) {
				if (index == 99 || index2 == 99) {
					this[`menus${index}${index2}`] = e[0];
					this[`menuList${index}${index2}`] = e[1];
				} else {
					this.coach[index].list[index2][`menus${index}${index2}`] = e[0];
					this.coach[index].list[index2][`menuList${index}${index2}`] = e[1];
					console.log("子组件发射出来的方法1",e , this.coach[index].list[index2][`menus${index}${index2}`], this.coach[index].list[index2][`menuList${index}${index2}`]);
				}
			},
			
			qitainput(e, index, index2) {
				if (index == 99 || index2 == 99) {
					this[`menus${index}${index2}`] = e[0];
				} else {
					this.coach[index].list[index2][`menus${index}${index2}`] = e[0];
					console.log("子组件发射出来的方法2",e , this.coach[index].list[index2][`menus${index}${index2}`]);
				}
			},
			getMenus(index, index2) {
				return this.coach[index].list[index2][`menus${index}${index2}`];
			},
			getMenuList(index, index2) {
				return this.coach[index].list[index2][`menuList${index}${index2}`];
			},
			toggle(item,index){
				this.coach[index].SYQ = !this.coach[index].SYQ
			},
			addstage(){
				let num = this.coach.length + 1
				let newstage = {
					title:'第'+ num +'阶段',
					SYQ: false,
					bgc:'#F4B249',
					list: [
						{
							id: 0,
							name: "训练重点",
							addName: "添加重点",
							[`menus${num-1}0`]:[
								{
									title:`减脂${num-1}0`,
									show:false,
								},
							],
							[`menuList${num-1}0`]: [],
						},
						{
							id: 1,
							name: "训练项目",
							addName: "添加项目",
							[`menus${num-1}1`]:[
								{
								title: `减脂${num-1}1`,
								show:false,
								}],
							[`menuList${num-1}1`]: [],
						},
					],
					target: [
						{
							name: "体重记录",
							value: "50",
							unit: "kg",
						},
						{
							name: "体脂变化",
							value: "30",
							unit: "%",
						},
						{
							name: "肌肉变化",
							value: "10",
							unit: "kg",
						},
						{
							name: "每周频率",
							value: "1",
							unit: "次/周",
						},
						{
							name: "阶段周期",
							value: "1",
							unit: "周",
						},
						{
							name: "阶段次数",
							value: "1",
							unit: "次",
						},
					],
					textArea: num,
				}		
				this.coach.push(newstage);
			},
			
			async jump(e){
				console.log(e.currentTarget.dataset.src)
				
				// 网络请求
				let data = {
					bId: 1, // 品牌id
					memberId: uni.getStorageSync("phyUser").userId, // 会员id
					// memberId: 285, // 会员id
					periodList: [],
					trainingFrequency: this.trainingFrequency, // 健身频率
					trainingCycle: this.trainingCycle, // 健身总周期
					userId: uni.getStorageSync("openid"), // 教练id
					// userId: 47, // 教练id
					trainingTarget: [],
				};
				
				this.coach.forEach((item, index) => {
					let periodItem = {
						weightChange: "", //体重记录
						bfChange: "", // 体脂变化
						muscleChange: "", // 肌肉变化
						periodFrequency: "", // 每周频率
						periodCycle: "", // 阶段周期
						periodNum: "", // 阶段次数
						name: "", // 适应期，进步期
						remark: "", // 备注
						trainingPonit: [], // 训练重点
						trainingProject: [], // 训练项目,
					}
					
					const findVal = (obj, val) => obj.find(item => item.name == val).value
					periodItem.weightChange = findVal(item.target, '体重记录');
					periodItem.bfChange = findVal(item.target, '体脂变化');
					periodItem.muscleChange = findVal(item.target, '肌肉变化');
					periodItem.periodFrequency = findVal(item.target, '每周频率');
					periodItem.periodCycle = findVal(item.target, '阶段周期');
					periodItem.periodNum = findVal(item.target, '阶段次数');
					data.periodList.push(periodItem)
					
					periodItem.name = item.title // 适应期
					periodItem.remark = item.textArea // 备注
					item.list[0][`menuList${index}0`].forEach(item => periodItem.trainingPonit.push(item.title));
					item.list[1][`menuList${index}1`].forEach(item => periodItem.trainingProject.push(item.title));
				})
				this.menuList9999.forEach(item => data.trainingTarget.push(item.title))
				
				console.log('查看提交的对象', data)
				// 正则验证
				for (let i of Object.values(data)) {
					if (!i) {
						uni.showToast({
							title: '请填写完整~',
							icon: "loading"
						});
						return false
					}
					uni.showToast({
						title: "正在提交...",
            icon: "loading"
					})
				}
		
				let res = await this.$myRuquest({
					// baseUrl: "http://192.168.1.102:9091",
					url: "/coach/training/addTrainingProgram",
					method: "POST",
					data,
					header:{
						'Content-Type':'application/json',
					},
				})
				
				if ( e.currentTarget.dataset.src == 'Not-yet-open') {
					uni.showModal({
						title:'提示',
						content:'功能即将开放',
						showCancel: false,
						confirmColor:"#DD524D",
							success() {
								return
							}
					})
				} else {
					uni.navigateTo({
						url: e.currentTarget.dataset.src
					});
				}
			},
			dialogConfirm(done, index, index2) {
				this.$refs[`popupDialog${index}${index2}`][0].open()
				// 需要执行 done 才能关闭对话框
				done()
			},
			dialogClose(done, index, index2) {
				this.msgType = 'info'
				this.message = '点击了对话框的取消按钮'
				this.$refs[`popupDialog${index}${index2}`][0].open()
				// 需要执行 done 才能关闭对话框
				done()
			},
			change(e) {
				console.log('popup ' + e.type + ' 状态', e.show)
			},
			toggleMessage(type, index, index2) {
				this.msgType = type
				switch (type) {
					case 'success':
						this.message = '这是一条成功消息提示'
						break
					case 'warn':
						this.message = '这是一条警告消息提示'
						break
					case 'info':
						this.message = '这是一条消息提示'
						break
					case 'error':
						this.message = '这是一条错误消息提示'
						break
				}
				console.log(type, index, index2)
				this.$refs[`popupDialog${index}${index2}`][0].open()
			},
			
		}
	}
</script>

<style lang="scss" scoped>
	.gird {background-color: #f8f8f8;display: flex;justify-content: space-between;padding: 0 30upx;height: 100upx;line-height: 100upx;}
	.active1 {background-color: #D7EBF6;}
	
	.items {
		background-color: #f8f8f8;
		height: 200upx;
		display: flex;
		justify-content: space-around;
		flex-direction: column;
		text-align: center;
		padding: 20upx;
	}
	.item_ul {
		flex-wrap: wrap;
		.item_li {
			line-height: 80upx;
			width: 33%;
			padding: 0 14rpx;
			box-sizing: border-box;
		}
	}
  
  .showMenulist {
     width: 100%;
     background: #b6dbd3;
     padding: 20rpx 20rpx;
     color: #FFFFFF;
  }
	
	
	.bgcolor1 {
		background-color: #86C2F4 !important;
	}
	.bgcolor2 {
		background-color: #809AF1 !important;
	}
	.bgcolor3 {
		background-color: #F6B958 !important;
	}
	.bgcolor4 {
		background-color: red !important;
	}
</style>
